<template>
  <div class="header">
    <div class="main">
      <el-row type="flex">
        <div class="logo">
          <router-link to="/">
            <img src="http://157.122.54.189:9093/images/logo.jpg" alt />
          </router-link>
        </div>
        <!-- 中间导航栏 -->
          <el-row class="nav" type="flex">
            <router-link to="/">首页</router-link>
            <router-link to="/post">旅游攻略</router-link>
            <router-link :to="{name:'Hotel',query: { cityName: '广州市' }}">酒店</router-link>
            <router-link to="/plane">国内机票</router-link>
          </el-row>
          <div class="login" v-if="this.$store.state.user.userInfo.token">
            <el-dropdown>
              <span class="el-dropdown-link">
                    <img class="login-img" src="https://himg.bdimg.com/sys/portrait/item/pp.1.94259fab.z8gpgsh5o_WIPwku0-O6VQ?_t=1584969024255" alt="" >
                    <span>{{this.$store.state.user.userInfo.user.nickname}}</span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="quit">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 登陆注册按钮 -->
          <div v-else @click="turnToLoginPage">登陆/注册</div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      baseurl: 'http://157.122.54.189:9093'
    }
  },
  created () {
  },
  methods: {
    turnToLoginPage () {
      if (this.$router.history.current.fullPath === '/user') return
      this.$router.push('/user')
    },
    quit () {
      this.$store.commit('user/clearUserInfo')
      this.$message.success('退出成功')
    }
  }
}
</script>

<style lang="less" scoped>
.header {
    box-shadow: 0 3px 3px #eee;
    height: 60px;
    line-height: 60px;
  .main {
    width: 1000px;
    margin: 0 auto;
    .logo {
      width: 156px;
      padding-top: 8px;
      img {
        display: block;
        width: 100%;
      }
    }
    .login{
      .login-img{
        width: 32px;
        vertical-align: -7px;
        border-radius: 50%;
        border: 2px solid transparent;
      }
      .login-img:hover{
        border: 2px solid #409eff;
      }
    }
    .nav {
      margin: 0 20px;
      flex: 1;
      a {
        display: block;
        padding: 0 20px;
        height: 60px;
        box-sizing: border-box;
        line-height: 60px;
        &:hover,
        &:focus,
        &:active {
          border-bottom: 5px #409eff solid;
          color: #409eff;
        }
      }
      .router-link-exact-active {
        background: #409eff;
        color: #fff !important;
      }
      .router-link-active{
        color: #000;
      }
      }
    }

}
</style>
